<template>
    <div class="quiz-data-search">
        <div class="tabs-top">
            <nuxt-link
                v-for="(item, index) in tabsList"
                :key="index"
                :to="`/ssfgk/${item.pathName}/0/1`"
                target="_blank"
            >
                <div :class="{ 'tabs-active': tabsIndex == index }" class="tab">
                    {{ item.name }}
                </div>
            </nuxt-link>
        </div>

        <div
            class="big-search"
            :style="{ backgroundImage: 'url(' + searchBj + ')' }"
            @keydown="keydown"
        >
            <div class="big-search-div">
                <el-dropdown
                    szie="medium"
                    placement="bottom-start"
                    @command="command"
                >
                    <div class="left">
                        {{ retrieveFields == "title" ? "查标题" : "" }}
                        {{
                            retrieveFields == "info_content_text"
                                ? "查文章"
                                : ""
                        }}
                        {{ retrieveFields == "push_number" ? "查文号" : "" }}
                        {{ retrieveFields == "push_date" ? "查时间" : "" }}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="title">
                            <span
                                :style="{
                                    color:
                                        retrieveFields == 'title'
                                            ? '#004895'
                                            : '#333333',
                                }"
                            >
                                查标题
                            </span>
                        </el-dropdown-item>
                        <el-dropdown-item command="info_content_text">
                            <span
                                :style="{
                                    color:
                                        retrieveFields == 'info_content_text'
                                            ? '#004895'
                                            : '#333333',
                                }"
                            >
                                查文章
                            </span>
                        </el-dropdown-item>
                        <el-dropdown-item command="push_number">
                            <span
                                :style="{
                                    color:
                                        retrieveFields == 'push_number'
                                            ? '#004895'
                                            : '#333333',
                                }"
                            >
                                查文号
                            </span>
                        </el-dropdown-item>
                        <el-dropdown-item command="push_date">
                            <span
                                :style="{
                                    color:
                                        retrieveFields == 'push_date'
                                            ? '#004895'
                                            : '#333333',
                                }"
                            >
                                查时间
                            </span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-input
                    v-if="
                        retrieveFields == 'title' ||
                        retrieveFields == 'info_content_text'
                    "
                    v-model="searchInput"
                    class="search-input"
                    placeholder="请输入内容"
                    maxlength="60"
                ></el-input>

                <template v-if="retrieveFields == 'push_number'">
                    <el-input
                        v-model="searchInput"
                        class="search-input"
                        placeholder="国家税务总局公告"
                        maxlength="60"
                    ></el-input>
                    <!-- <span class="kuohao">〔</span>
                    <el-input
                        class="search-input"
                        style="width: 100px"
                        v-model="number2"
                        placeholder="2023"
                    ></el-input>
                    <span class="kuohao">〕</span>
                    年
                    <el-input
                        class="search-input"
                        style="width: 80px"
                        v-model="number3"
                        placeholder="1"
                    ></el-input>
                    号
                    <span style="padding: 0 20px"></span> -->
                </template>

                <template v-if="retrieveFields == 'push_date'">
                    <el-date-picker
                        v-model="date"
                        class="search-input"
                        type="daterange"
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </template>

                <div class="search-button" @click="searchClick">
                    <i class="el-icon-search"></i>
                    搜索
                </div>
            </div>
        </div>

        <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">
                    首页
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/ssfgk/index/0/1' }">
                    税收法规库
                </el-breadcrumb-item>
                <el-breadcrumb-item>搜索</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="filterate-tabs">
            <div
                class="f-tab"
                :class="{ active: tabsIndex == 0 }"
                @click="tabsFilter({ searchFilter: null }, 0)"
            >
                全部
            </div>
            <div
                v-for="(item, index) in tabsList"
                :key="index"
                v-show="index != 0"
                class="f-tab"
                :class="{ active: tabsIndex == index }"
                @click="tabsFilter(item, index)"
            >
                {{ item.name }}
            </div>
        </div>

        <div class="main">
            <div class="main-left">
                <div class="title">筛选条件</div>
                <div class="screen">
                    <div
                        class="screen-item"
                        :class="{
                            active: retrieveFields == 'info_content_text',
                        }"
                        @click="checkScreen('info_content_text')"
                    >
                        全文搜索
                    </div>
                    <div
                        class="screen-item"
                        :class="{ active: retrieveFields == 'title' }"
                        @click="checkScreen('title')"
                    >
                        标题搜索
                    </div>
                    <div
                        class="screen-item"
                        :class="{ active: retrieveFields == 'push_number' }"
                        @click="checkScreen('push_number')"
                    >
                        文号搜索
                    </div>
                </div>
                <div class="screen">
                    <div
                        class="screen-item"
                        :class="{ active: dateFilterate == 0 }"
                        @click="dateCheck(0)"
                    >
                        全部时间
                    </div>
                    <div
                        class="screen-item"
                        :class="{ active: dateFilterate == 30 }"
                        @click="dateCheck(30)"
                    >
                        一个月内
                    </div>
                    <div
                        class="screen-item"
                        :class="{ active: dateFilterate == 90 }"
                        @click="dateCheck(90)"
                    >
                        三个月内
                    </div>
                    <div
                        class="screen-item"
                        :class="{ active: dateFilterate == 365 }"
                        @click="dateCheck(365)"
                    >
                        一年内
                    </div>
                </div>
            </div>
            <div class="main-right">
                <div class="main-right-top">
                    <div>
                        地区：
                        <el-popover
                            placement="bottom"
                            trigger="click"
                            popper-class="search--popover"
                            v-model="cityShow"
                        >
                            <el-cascader-panel
                                v-model="city_code"
                                ref="cityRef"
                                :options="region"
                                :props="regionProps"
                                :show-all-levels="false"
                                @change="cityChange"
                            ></el-cascader-panel>

                            <span slot="reference">
                                {{ getCity }}
                                <i class="el-icon-caret-bottom"></i>
                            </span>
                        </el-popover>
                    </div>
                    <div>
                        效力注释：
                        <el-dropdown @command="xiaoliChang" trigger="click">
                            <span>
                                {{ active_info == 0 ? "全部" : active_info
                                }}<i class="el-icon-caret-bottom"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                    :style="{
                                        color:
                                            0 == active_info
                                                ? '#004895'
                                                : '#333333',
                                    }"
                                    :command="0"
                                >
                                    全部
                                </el-dropdown-item>
                                <el-dropdown-item
                                    v-for="(item, index) in xiaoliList"
                                    :key="index"
                                    :command="item.id"
                                >
                                    <span
                                        :style="{
                                            color:
                                                item.id == active_info
                                                    ? '#004895'
                                                    : '#333333',
                                        }"
                                        >{{ item.name }}</span
                                    >
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div>
                        税种：
                        <el-dropdown @command="policyCateChang" trigger="click">
                            <span>
                                {{
                                    policyCateIndex == -1
                                        ? "全部"
                                        : policyCate[policyCateIndex].name
                                }}
                                <i class="el-icon-caret-bottom"></i>
                            </span>
                            <el-dropdown-menu
                                slot="dropdown"
                                style="max-height: 200px; overflow: hidden auto"
                            >
                                <el-dropdown-item
                                    :style="{
                                        color:
                                            -1 == policyCateIndex
                                                ? '#004895'
                                                : '#333333',
                                    }"
                                    :command="-1"
                                >
                                    全部
                                </el-dropdown-item>
                                <el-dropdown-item
                                    v-for="(item, index) in policyCate"
                                    :key="index"
                                    :command="index"
                                >
                                    <span
                                        :style="{
                                            color:
                                                index == policyCateIndex
                                                    ? '#004895'
                                                    : '#333333',
                                        }"
                                        >{{ item.name }}</span
                                    >
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div>
                        日期排序：
                        <span @click="checkSort" trigger="click">
                            发文日期
                            <i
                                v-show="sortPushDate === null"
                                class="el-icon-d-caret"
                            ></i>
                            <i
                                v-show="sortPushDate === 0"
                                class="el-icon-caret-top"
                            ></i>
                            <i
                                v-show="sortPushDate === 1"
                                class="el-icon-caret-bottom"
                            ></i>
                        </span>
                    </div>
                </div>
                <div class="num">
                    共搜索到
                    <span>{{ total }}</span>
                    条相关结果
                </div>
                <div class="result-list" v-loading="loading">
                    <nuxt-link
                        v-for="(item, index) in pageDataList"
                        :key="index"
                        class="result-item"
                        :to="`/ssfgk/${item.policyData.id}.html`"
                        target="_blank"
                    >
                        <div
                            class="result-item-title"
                            v-html="item.policyData.title"
                        ></div>
                        <div
                            class="result-item-content"
                            v-html="item.policyData.info_content"
                        ></div>
                        <div class="result-item-type">
                            <div style="min-width: 170px">
                                效力注释：{{ item.policyData.active_info }}
                            </div>
                            <div
                                style="min-width: 170px"
                                v-html="
                                    '发文日期：' + item.policyData.push_date
                                "
                            ></div>
                            <div
                                v-html="
                                    '发文字号：' + item.policyData.push_number
                                "
                            ></div>
                        </div>
                    </nuxt-link>
                    <div v-if="pageDataList.length == 0" class="empty">
                        <el-empty description="未搜索到相关内容"></el-empty>
                    </div>
                    <div v-show="total > limit" class="page">
                        <el-pagination
                            background
                            layout="prev, pager, next, jumper"
                            :total="total"
                            :page-size="limit"
                            :current-page.sync="page"
                            @current-change="currentChange"
                        >
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import region from "@/assets/json/region.json";
import { mapMutations, mapState, mapActions } from "vuex";
import searchBj from "@/assets/images/regulations/TaxRevenue-bj.jpg";
import { policySearch } from "@/assets/api/searchApi";
import {
    readJsonFileContent,
    getText,
    goTopSmooth,
    answerFormat2,
} from "@/assets/utils/utils";
import { getPolicyCate } from "@/assets/api/regulationsApi.js";
import { getanalysedata } from "@/assets/api/indexApi.js";
var policyDataList = [];
export default {
    name: "QuizDataSearch",
    components: {},
    head() {
        return {
            title: this.mateInfo.title + "搜索结果-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税税收法规库",
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            input: "",
            mateInfo: {
                title: "",
                keywords: "",
                description: "",
            },

            retrieveFields: "title",

            searchInput: "",
            number2: "",
            number3: "",
            date: "",

            searchBj: searchBj,
            tabsIndex: 0,

            pickerOptions: {
                shortcuts: [
                    {
                        text: "一个月内",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "三个月内",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "一年内",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 365
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },

            limit: 15,
            page: 1,
            total: 0,
            pageDataList: [],

            loading: false,

            queryKeywords: [],

            sortPushDate: null, // 升序：0，降序：1

            filter: null,

            dateFilterate: 0,

            region: [],
            regionProps: {
                label: "name",
                value: "id",
                children: "children",
            }, // 地区级联选择器配置
            city_code: "",
            cityShow: false,

            // 效力注释
            xiaoliList: [
                {
                    id: "现行有效",
                    name: "现行有效",
                },
                {
                    id: "部分失效/废止",
                    name: "部分失效/废止",
                },
                {
                    id: "全文失效/废止",
                    name: "全文失效/废止",
                },
                {
                    id: "已修订",
                    name: "已修订",
                },
            ],
            active_info: 0,

            // 税种
            policyCate: [],
            policyCateIndex: -1,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        ...mapState("regulations", {
            tabsList: (state) => state.TTabsList,
        }),

        getCity: function () {
            if (!this.city_code || !this.city_code[0]) {
                return "全部";
            }
            if (this.region.length > 0 && this.city_code.length > 0) {
                for (let items of this.region) {
                    if (items.id == this.city_code[0]) {
                        for (let item of items.children) {
                            if (item.id == this.city_code[1]) {
                                if (items.name == item.name) return items.name;
                                else return items.name + item.name;
                            }
                        }
                    }
                }
            }
        },
    },
    created() {},
    mounted() {
        this.retrieveFields = this.$route.query.t;
        switch (this.$route.query.t) {
            case "title":
                this.searchInput = this.$route.query.k;
                break;
            case "info_content_text":
                this.searchInput = this.$route.query.k;
                break;
            case "push_date":
                this.date = this.$route.query.date.split(",");
                break;
            case "push_number":
                this.searchInput = this.$route.query.k;
                // this.number2 = this.$route.query.n2;
                // this.number3 = this.$route.query.n3;
                break;
            default:
                this.searchInput = this.$route.query.k;
                this.retrieveFields = "title";
                break;
        }

        this.getRegion();
        // 获取税种
        this.getPolicyCate();
        this.policySearch();
        getanalysedata({
            m_id: 2,
            type: 1,
            code: "PD2",
            describe: this.searchInput,
        });
    },
    watch: {},

    methods: {
        searchClick() {
            if (
                (this.retrieveFields == "title" ||
                    this.retrieveFields == "info_content_text") &&
                !this.searchInput
            ) {
                this.$message({
                    message: "请输入搜索内容",
                    type: "warning",
                });
                return;
            }
            if (this.retrieveFields == "push_date" && !this.date) {
                this.$message({
                    message: "请输入搜索内容",
                    type: "warning",
                });
                return;
            }
            if (this.retrieveFields == "push_number" && !this.searchInput) {
                this.$message({
                    message: "请输入搜索内容",
                    type: "warning",
                });
                return;
            }
            if (this.retrieveFields == "push_date") this.searchInput = "";
            else this.date = "";
            this.dateFilterate = 0;
            this.active_info = 0;
            this.policyCateIndex = -1;
            this.mateInfo.title = this.searchInput;
            this.sortPushDate = null;
            this.city_code = "";
            this.page = 1;
            this.$router.push({
                path: "/ssfgksearch",
                query: {
                    k: this.searchInput,
                    date: this.date.length > 0 ? this.date.join(",") : "",
                    t: this.retrieveFields,
                },
            });
            this.policySearch();
        },

        async policySearch() {
            if (
                (this.retrieveFields == "title" ||
                    this.retrieveFields == "info_content_text") &&
                !this.searchInput
            ) {
                this.searchInput = this.$route.query.k;
            }
            if (this.retrieveFields == "push_date" && !this.date) {
                this.date = this.$route.query.date.split(",");
            }
            if (this.retrieveFields == "push_number" && !this.searchInput) {
                this.searchInput = this.$route.query.k;
            }

            if (this.loading) return;
            this.loading = true;
            let keyword = this.searchInput;

            this.mateInfo.title = this.searchInput;

            if (this.retrieveFields == "push_number")
                keyword = this.searchInput;

            let params = {
                query: keyword,
                retrieveFields:
                    this.retrieveFields == "info_content_text"
                        ? [this.retrieveFields, "title"]
                        : [this.retrieveFields],
                page: this.page,
                pageSize: this.limit,
                filter: {},
            };

            if (this.sortPushDate !== null) {
                params.sortList = [{ push_date: this.sortPushDate }];
            }
            if (this.date) {
                params.dateScope = {
                    startDate: this.date[0],
                    endDate: this.date[1],
                };
            }

            // 判断过滤条件
            if (this.filter) {
                if (!this.filter.code) params.filter = this.filter;
                else params.code = this.filter.code;
            }

            // 地区过滤
            if (this.city_code && this.city_code.length > 1) {
                params.code = this.city_code[1];
            }

            // 效力注释
            if (this.active_info != 0) {
                params.filter.active_info = this.active_info;
            }

            // 税种
            if (this.policyCateIndex > -1) {
                if (params.filter.policy_cate_id) {
                    if (
                        params.filter.policy_cate_id !=
                        this.policyCate[this.policyCateIndex].id
                    )
                        params.filter.policy_cate_id +=
                            "," + this.policyCate[this.policyCateIndex].id;
                } else {
                    params.filter.policy_cate_id =
                        this.policyCate[this.policyCateIndex].id + "";
                }
            }

            const res = await policySearch(params);
            if (res.status == 0) {
                this.total = res.data.resultTotal;
                this.queryKeywords = res.data.queryKeywords;
                policyDataList = res.data.result;

                this.getPageData();
            }
        },

        // 取到当前分页的数据
        async getPageData() {
            for (let item of policyDataList) {
                let data = await readJsonFileContent(item.matchDataUrl);
                data.data.info_content = getText(data.data.info_content, 120);
                item.policyData = {
                    ...data.data,
                };
            }

            this.pageDataList = answerFormat2(
                policyDataList,
                this.queryKeywords,
                this.retrieveFields
            );
            this.$nextTick(() => {
                this.loading = false;
                goTopSmooth();
            });
        },

        command(e) {
            this.searchInput = "";
            this.date = "";
            this.number2 = "";
            this.number3 = "";
            this.retrieveFields = e;
        },

        // 一级菜单过滤
        tabsFilter(item, index) {
            this.filter = item.searchFilter;
            this.tabsIndex = index;
            this.policySearch();
        },

        // 切换排序
        checkSort() {
            if (this.sortPushDate === null) this.sortPushDate = 1;
            else if (this.sortPushDate === 1) this.sortPushDate = 0;
            else if (this.sortPushDate === 0) this.sortPushDate = null;
            this.page = 1;
            this.policySearch();
        },

        // 选择地区
        cityChange(e) {
            this.cityShow = false;
            this.policySearch();
        },

        // 选择效力注释
        xiaoliChang(e) {
            this.active_info = e;
            this.policySearch();
        },

        currentChange(page) {
            if (this.loading) return;
            this.page = page;
            goTopSmooth();
            this.policySearch();
        },

        checkScreen(fn) {
            this.retrieveFields = fn;
            this.policySearch();
        },

        // 获取税种
        async getPolicyCate() {
            const res = await getPolicyCate({});
            if (res.code == 1) {
                this.policyCate = res.data;
            }
        },

        // 税种选择
        policyCateChang(e) {
            this.policyCateIndex = e;
            this.policySearch();
        },

        // 处理省市区数据
        getRegion() {
            let region_n = region;
            for (let items of region_n) {
                for (let item of items.children) {
                    delete item.children;
                }
            }

            this.region = [
                {
                    id: "",
                    level: 1,
                    name: "全部",
                    pid: "",
                },
                ...region_n,
            ];
        },

        dateCheck(num) {
            if (this.dateFilterate == num) return;
            this.page = 1;
            this.dateFilterate = num;
            if (num == 0) {
                this.date = "";
                this.policySearch();
                return;
            }
            this.date = [
                new Date(new Date().getTime() - num * 24 * 60 * 60 * 1000)
                    .toISOString()
                    .split("T")[0], //一个月前
                new Date().toISOString().split("T")[0], //当前日期
            ];
            this.policySearch();
        },

        keydown(e) {
            if (!e.shiftKey && e.keyCode == 13) {
                e.cancelBubble = true; //ie阻止冒泡行为
                e.stopPropagation(); //Firefox阻止冒泡行为
                e.preventDefault(); //取消事件的默认动作*换行
                //以下处理发送消息代码
                if (e.keyCode == 13) {
                    this.searchClick();
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.quiz-data-search {
    background-color: #f7fbff;
    padding-bottom: 30px;
}

.tabs-top {
    position: sticky;
    top: 80px;
    left: 0;
    height: 50px;
    background: #1c87f3;
    display: flex;
    z-index: 997;
    // width: 1200px;
    // margin: 0 auto;
    justify-content: center;

    .tab {
        line-height: 50px;
        font-size: 14px;
        color: #ffffff;
        padding: 0 24px;
        cursor: pointer;
        user-select: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &:hover {
            background: #1976d4;
        }
    }

    .tabs-active {
        background: #1976d4;
    }
}

.breadcrumb {
    width: 1200px;
    margin: 16px auto 0;
}

.filterate-tabs {
    width: 1200px;
    margin: 16px auto 0;
    height: 66px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    .f-tab {
        font-size: 14px;
        color: #666666;
        cursor: pointer;
        user-select: none;
    }
    .active {
        color: #077bfe;
    }
}

.sc {
    width: 1200px;
    margin: 16px auto 0;
    height: 50px;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 20px;
    .sc-item {
        height: 28px;
        padding: 0 7px;
        background: #f4f4f4;
        border-radius: 4px;
        font-size: 12px;
        color: #666666;
        line-height: 28px;
        margin-right: 14px;
        i {
            cursor: pointer;
            &:hover {
                color: #333333;
            }
        }
    }
}

.main {
    width: 1200px;
    margin: 16px auto 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.main-left {
    box-sizing: border-box;
    width: 216px;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    padding: 20px 23px;
    .title {
        padding-left: 20px;
        padding-bottom: 20px;
        font-size: 16px;
        font-weight: 500;
        color: #666666;
        border-bottom: 1px solid #f1f1f1;
    }
    .screen {
        padding-top: 19px;
        .screen-item {
            padding-left: 20px;
            font-size: 14px;
            color: #666666;
            border-left: 3px solid transparent;
            height: 40px;
            line-height: 40px;
            user-select: none;
            cursor: pointer;
        }
        .active {
            border-left-color: #077bfe;
            background: #f5faff;
            color: #077bfe;
        }
    }
}

.main-right {
    width: 964px;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    box-sizing: border-box;
    padding: 25px 30px;
    .main-right-top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 10px 25px;
        border-bottom: 1px solid #e4e4e4;
        div {
            font-size: 14px;
            color: #999999;
            margin-right: 40px;
        }
        span {
            color: #333333;
            cursor: pointer;
        }
        .cate-list {
            &::v-deep .el-dropdown-menu {
                max-height: 200px;
                overflow-y: auto;
                overflow-x: hidden;
                scrollbar-width: 2px;
                scrollbar-color: #999;
                &::-webkit-scrollbar {
                    width: 2px;
                    background: #999;
                }
                &::-webkit-scrollbar-track {
                    background: #fff;
                }
            }
        }
    }
    .num {
        padding-top: 25px;
        padding-left: 10px;
        font-size: 16px;
        color: #999999;
        span {
            color: #333333;
        }
    }
    .result-list {
        padding-top: 25px;
        .result-item {
            padding: 0 10px 25px;
            border-bottom: 1px solid #e4e4e4;
            margin-bottom: 22px;
            box-sizing: border-box;
            display: block;
            cursor: pointer;
            &:hover {
                .result-item-title {
                    font-weight: 600;
                    color: #077bfe;
                    text-decoration: underline;
                }
            }
            > div {
                white-space: nowrap; /* 不换行 */
                overflow: hidden; /* 超出部分隐藏 */
                text-overflow: ellipsis; /* 超出部分显示省略号 */
                -webkit-line-clamp: 2; /* 限定显示的行数，这里设置为3行 */
                -webkit-box-orient: vertical; /* 这使得display:-webkit-box生效 */
                display: -webkit-box; /* 作为flex容器的webkit版本 */
                white-space: normal;
            }
            .result-item-title {
                font-size: 16px;
                font-weight: 600;
                color: #222222;
                line-height: 24px;
                margin-bottom: 10px;
            }
            .result-item-content {
                font-size: 14px;
                color: #666666;
                line-height: 22px;
            }
            .result-item-type {
                padding-top: 10px;
                display: flex;
                font-size: 12px;
                color: #999999;
            }
        }
        .page {
            text-align: center;
            padding: 20px 0;
        }
    }
}

.big-search {
    height: 140px;
    width: 100%;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.big-search-div {
    display: flex;
    align-items: center;
    height: 55px;
    background-color: #ffffff;

    .left {
        text-align: center;
        width: 105px;
        height: 55px;
        line-height: 55px;
        cursor: pointer;
        user-select: none;
    }
    .kuohao {
        padding: 0 10px;
    }
    .search-input {
        border: none;
        width: 505px;

        &::v-deep .el-input__inner {
            border: none;
            // border-left: 1px solid #dfdfdf;
            border-radius: 0;
            font-size: 16px;
            // height: 26px;
            // list-style: 26px;
        }
    }

    .search-button {
        cursor: pointer;
        width: 133px;
        height: 55px;
        background: #004895;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 55px;

        i {
            font-size: 18px;
        }

        &:active {
            opacity: 0.8;
        }
    }
}

::v-deep em {
    color: red !important;
}
::v-deep .el-date-editor .el-range__icon {
    color: #1c87f3;
}
</style>
<style>
.search--popover {
    width: auto;
    position: absolute;
    padding: 0 !important;
}
</style>
